.f-page-is-sidescrollspy .f-page-main {
    position: relative;
    margin-right: 0;
    background: $f-tmpl-bg;
    overflow: hidden;

    .f-scrollspy-content {
        background: $f-neutral-00;
        margin-right: 0.625rem;
        height: 100%;
        overflow: auto;
    }
}

.f-page-is-sidescrollspy.f-page-is-mainsubcard .f-page-main {
    padding: 0;
}

.f-page-is-scrollspy-onepage .f-page-main {
    margin-right: 0;
    background: $f-tmpl-bg;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .f-scrollspy-content {
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: 0;
        margin-top: $f-section-gutter-height;
        background: $f-neutral-00;
        margin-right: 0.625rem;
        overflow: auto;
    }
}

// 左右、两侧滚动监听
.f-scrollspy-sidetabs {
    .f-scrollspy-monitor-btn {
        &::before {
            border-color: $f-neutral-05;
        }

        &::after {
            border: 4px solid $f-scrollspy-title-default-border;
            background: $f-scrollspy-title-default-bg;
        }

        &.active {
            &::after {
                border: 4px solid $f-scrollspy-title-active-border;
                background: $f-scrollspy-title-active-bg ;
            }
        }
    }

    &:hover {
        .f-scrollspy-monitor-tip {
            box-shadow: 0 0 0 0 rgba(56, 143, 255, 0.50);
        }
    }

    .f-scrollspy-monitor-tip {
        background: $f-theme-11;
        box-shadow: 0 0 14px 0 rgba(56, 143, 255, 0.50);
    }
}

.f-scrollspy-tabs {
    .f-scrollspy-monitor-btn {
        .f-scrollspy-monitor-title {
            color: $f-scrollspy-tab-title-color;
            font-size: $f-scrollspy-tab-title-font-size;
        }

        &.active {
            .f-scrollspy-monitor-title {
                color: $f-scrollspy-tab-title-active-color;
            }

            &::after {
                background-color: $f-scrollspy-tab-title-active-bg;
            }
        }
    }
}

$f-scrollspy-tabs-inner-gutter: 0 0.125 !default;


.f-scrollspy-sidetabs {
    z-index: 899 !important;
}

// OnePage
.f-scrollspy-tabs {
    border-bottom: 1px dashed #EAEAEA;
    padding: $f-scrollspy-tabs-inner-gutter;

    .f-scrollspy-monitor-btn {
        padding: $f-scrollspy-tabs-monitor-btn-inner-gutter !important;
        margin: $f-scrollspy-tabs-monitor-btn-outer-gutter;

        &::after {
            bottom: 0 !important;
            width: $f-scrollspy-tabs-monitor-btn-decoration-width !important;
            margin-left: -$f-scrollspy-tabs-monitor-btn-decoration-width * 0.5 !important;
        }
    }
}


.f-onepage-tabs+.f-page-main {
    margin-top: 0;
    box-shadow: $farris-split-section-shadow-top-none;
}

.f-page-is-sidescrollspy .f-page-main {
    &.f-scrollspy-container-fixed-parent {
        display: flex;
        flex-direction: column;

        .f-scrollspy-container-fixed {
            flex: 1 1 0;
            position: relative;
        }
    }

    .f-scrollspy-container-fixed.f-scrollspy-content {
        @include f-utils-flex(column, true);

        .f-scrollspy-part:not(.f-scrollspy-part-active) {
            display: none;
        }

        .f-struct-like-card {
            @include f-flex-fill;
            position: relative;
        }

        .f-section-form {
            .f-section-content {
                overflow: auto;
            }
        }

        .f-section-accordion.f-state-collapse>.f-section-content {
            height: 0 !important;
            overflow: hidden !important;
            flex: 0 1 0 !important;

        }

        .f-struct-subsub-wrapper {
            position: static;

            &::before,
            &::after {
                display: none;
                ;
            }
        }

        // 解除从表的限制高度
        .f-struct-is-subgrid {
            @include f-flex-fill;
            @include f-utils-flex(column);

            .f-grid-is-sub {
                @include f-flex-fill;
            }
        }

        .f-scrollspy-part-active {
            @include f-utils-absolute-all;

            // 与section结合
            &.f-section {
                .f-section-content {
                    flex-shrink: 1;
                    flex-grow: 1;
                    flex-basis: 0;
                    display: flex;
                    flex-direction: column;
                    position: relative;

                    .f-viewchange-content-item {
                        @include f-utils-absolute-all;
                        display: flex;
                        flex-direction: column;
                    }
                }

                .f-section-header {
                    .f-title>* {
                        display: none;
                    }

                    .f-max-accordion {
                        display: none;
                    }
                }
            }

            &.f-section-tabs {
                .f-section-content {
                    @include f-utils-flex(column);
                }
            }

            &.farris-tabs,
            .farris-tabs {
                .f-tab-active {
                    position: relative;
                    display: flex;
                    @include f-flex-fill;
                    flex-direction: column;
                    overflow: auto;
                }
            }
        }
    }
}